<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>

<body>
    <div id="app">
        <pre v-pre class="note">
        v-memo性能比对指令 : vue3新增加指令,该指令由开发者自行定义页面渲染触发条件，调整渲染性能
            + 该指令接收一个固定长度的数组作为依赖值进行记忆比对。如果数组中的每个值都和上次渲染的时候相同，则整个包裹区的更新会被跳过。
        </pre>
        <ul>
            <li v-for="p in products" v-memo="[ p.name ]">
                <p>{{ p }}</p>
                <input type="checkbox" :checked="p.state" @change="p.state = $event.target.checked">
                <input type="text" :value="p.name" @input="p.name = $event.target.value">
            </li>
        </ul>
    </div>
    <script src="../assets/mockjs/mock-min.js"></script>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    products: Mock.mock({
                        "list|4": [
                            {
                                name: "@cword(4)",
                                state: false
                            }
                        ]
                    }).list
                }
            }
        }).mount("#app");
    </script>
</body>

</html>